<template>
  <div class="list-table">
    <div class="area-header" style="margin-bottom: 20px; text-align: left;">
      <span class="area-header-title">{{ $t('项目上市信息') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('投资主体名称')" prop="investName">
        <el-input
          v-model="queryParams.investName"
          :placeholder="$t('投资主体名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('基金名称')" prop="fundName">
        <el-input
          v-model="queryParams.fundName"
          :placeholder="$t('基金名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
        <el-button
          v-hasPermi="['bf:investreport:export']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="exportHandle"
        >{{ $t("导出") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" tooltip-effect="darkTable" :data="list" :span-method="objectSpanMethod" :cell-style="cellStyle" border>
      <el-table-column :label="$t('投资主体名称')" prop="investName" align="center" fixed show-overflow-tooltip width="200" />
      <el-table-column :label="$t('基金名称')" prop="fundName" align="center" fixed show-overflow-tooltip width="200">
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.fundId,dealType: dealType, companyId:scope.row.dealId}}"
            class="link_a"
          >
            {{ scope.row.fundName }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('序号')" prop="number" align="center" width="80" />
      <el-table-column :label="$t('项目名称')" prop="dealName" align="center" show-overflow-tooltip width="200" />
      <el-table-column :label="$t('注册地')" prop="registeredProvince" width="150" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.registeredProvince && scope.row.registeredCity">{{ scope.row.registeredProvince + ' - ' + scope.row.registeredCity }}</span>
          <span v-else-if="scope.row.registeredProvince">{{ scope.row.registeredProvince }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('上市情况')" prop="listedSituation" width="150" align="center" :formatter="bfGroupListedSituationFormat" />
      <el-table-column :label="$t('上市板块')" prop="listedSector" width="150" align="center" :formatter="bfGroupListedSectorFormat" />
      <el-table-column :label="$t('股票代码')" prop="stockCode" width="150" align="center" show-overflow-tooltip />
      <el-table-column :label="$t('投资时间')" prop="investTime" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.investTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('投资金额') + $t('金额单位')" prop="investAmount" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.investAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('备注')" prop="remark" align="center" show-overflow-tooltip width="200" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getInvestDealInfo } from '@/api/bf/base/bfBase'

export default {
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      // 上市板块字典
      bfGroupListedSectorOptions: [],
      // 上市情况字典
      bfGroupListedSituationOptions: [],
      // 项目状态
      dealType: this.$route.query.dealType,
      // 菜单标识-用来查询项目内菜单
      menuKey: '',
      // 高级查询的key
      searchKey: '',
      rowIndex: 1,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        investName: undefined,
        fundName: undefined,
        dealName: undefined
      }
    }
  },
  mounted() {
    this.getList()
    // 上市板块字典
    this.getDicts('bf_group_listed_sector').then(response => {
      this.bfGroupListedSectorOptions = response.data
    })
    // 上市情况字典
    this.getDicts('bf_group_listed_situation').then(response => {
      this.bfGroupListedSituationOptions = response.data
    })
  },
  methods: {
    getList() {
      this.loading = true
      getInvestDealInfo(this.queryParams).then(res => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const spanArr = this.rowspan()
        for (let i = 0; i < spanArr.length; i++) {
          const _row = spanArr[rowIndex]
          return {
            rowspan: _row,
            colspan: 1
          }
        }
      }
      if (columnIndex === 1) {
        const spanArr = this.rowspan2()
        for (let i = 0; i < spanArr.length; i++) {
          const _row = spanArr[rowIndex]
          return {
            rowspan: _row,
            colspan: 1
          }
        }
      }
    },
    rowspan() {
      // 二维数组，用于存放单元格合并规则
      const spanArr = []
      // 用于存储相同项的开始index
      let position = 0
      this.list.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
          position = 0
        } else {
          if (this.list[index].investId === this.list[index - 1].investId) {
            spanArr[position] += 1 // 有相同项
            spanArr.push(0) // 名称相同后往数组里面加一项0
          } else {
            spanArr.push(1) // 同列的前后两行单元格不相同
            position = index
          }
        }
      })
      return spanArr
    },
    rowspan2() {
      // 二维数组，用于存放单元格合并规则
      const spanArr = []
      // 用于存储相同项的开始index
      let position = 0
      this.list.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
          position = 0
        } else {
          if (this.list[index].investId === this.list[index - 1].investId && this.list[index].fundId === this.list[index - 1].fundId) {
            spanArr[position] += 1 // 有相同项
            spanArr.push(0) // 名称相同后往数组里面加一项0
          } else {
            spanArr.push(1) // 同列的前后两行单元格不相同
            position = index
          }
        }
      })
      return spanArr
    },
    cellStyle({ row }) {
      if (row.dealName === '小计') {
        return 'font-weight: bolder;'
      }
    },
    // 上市板块字典翻译
    bfGroupListedSectorFormat(row) {
      return this.selectDictLabel(this.bfGroupListedSectorOptions, row.listedSector)
    },
    // 上市情况字典翻译
    bfGroupListedSituationFormat(row) {
      return this.selectDictLabel(this.bfGroupListedSituationOptions, row.listedSituation)
    },
    /** 导出按钮操作 */
    exportHandle() {
      this.downLoadExcel('/bf/bfBase/export', this.queryParams)
    }
  }
}
</script>

<style scoped>

</style>
